import React from 'react'
import './index.css'

export default function Footer({todoList,setTodoList}) {
// 计算已完成的个数
const getCheckedNum=()=>{
  return todoList.reduce((p,c)=>c.done?p+1:p,0)
}
//全部选中的多选框选择事件函数
const checedAllHandle=(e)=>{
// console.log(e.target.checked);
  const expChecked=e.target.checked

  const newToduList=todoList.map((item)=>{
    return {...item,done:expChecked}
  })
  setTodoList(newToduList)
}
  const deleteAllHandle=()=>{
    const newTodoList=todoList.filter(item=>!item.done)
    setTodoList(newTodoList)
  }
  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" onChange={checedAllHandle} checked={getCheckedNum()===todoList.length&& todoList.length!==0}/>
      </label>
      <span>
        <span>已完成{getCheckedNum()}</span> / 全部{todoList.length}
      </span>
      <button className="btn btn-danger" onClick={deleteAllHandle}>清除已完成任务</button>
    </div>
  )
}
